
<template>
	<view>
		<headerVue :cur="datas"></headerVue>
		<!-- 首页 -->
		<view  style="background-color: rgba(255, 255, 255, 1);">
			<view style="margin-bottom: 76.7rpx; margin-top: 650rpx;">
				<view @click="jump(1)">
					<u-row justify="space-between" customStyle="margin-top: 17.3rpx;margin-left:48.8rpx;margin-bottom: 33rpx;margin-right:48.8rpx; line-height: 52.3px;">
						<u-col span="5" >
							<view class="demo-layout bg-purple-light" style="font-size: 32rpx; ">人物关系</view>
						</u-col>
						<u-col span="3" >
							<view class="demo-layout bg-purple" style="color: rgba(166, 166, 166, 1);">查看更多></view>
						</u-col>
					</u-row>
				</view>
				<view>
					<u-popup :show="show" @close="close" customStyle="width: 606rpx; height: 790rpx;" mode="center"
						:closeable="true" round="20">
						<view class="popu">
							<text>关系介绍</text><br>
							<image class="popu_img" :src="oss_host+rbc.image"></image>
							<view class="popu_tex">
								<text>{{rbc.name}}</text><br>
								<text class="text1">{{rbc.guanxi}}</text>
							</view>
				
						</view>
						<view class="popu_text">
							<view style="margin-bottom: 37rpx;">亲友介绍</view>
							<view v-if="rbc.des==''">
								<u-loadmore loadmoreText="没有更多了" lineColor="#b7b7b7" dashed line />
							</view>
							<u--text :text="rbc.des"></u--text>
						</view>
				
					</u-popup>
				</view>
				<view>
					<u-grid :border="false" col="4" style="margin-left:48.8rpx;margin-right:48.8rpx;" >
						<u-grid-item v-for="(listItem,listIndex) in u_guanxi" :key="listIndex" @click="character(listItem)">
							<image style="border-radius: 50px; width: 112rpx; height: 112rpx;" :src="oss_host+listItem.image"></image>
							<text class="grid-text" style="margin-top: 28rpx; font-size: 28rpx; color: rgba(0, 0, 0, 1);">{{listItem.name}}</text>
							<text class="grid-text" style="margin-bottom: 24.4rpx; font-size: 24.4rpx; color: rgba(153, 153, 153, 1);">{{listItem.guanxi}}</text>
						</u-grid-item>
					</u-grid>
				</view>
				<u-line :hairline="false" ></u-line>
				<view @click="jump(0)">
					<u-row justify="space-between" customStyle="margin-top: 15rpx;margin-left:48.8rpx;margin-bottom: 33rpx;margin-right:48.8rpx; line-height: 52.3px;">
						<u-col span="5" >
							<view class="demo-layout bg-purple-light" style="font-size: 32rpx;" >人物简介</view>
						</u-col>
						<u-col span="3" >
							<view class="demo-layout bg-purple" style="color: rgba(166, 166, 166, 1);">查看更多></view>
						</u-col>
					</u-row>
				</view>
				<u-line :hairline="false" ></u-line>
				<view  @click="jump(2)">
					<u-row justify="space-between" customStyle="margin-top: 17.3rpx;margin-left:48.8rpx;margin-bottom: 33rpx;margin-right:48.8rpx; line-height: 52.3px;">
						<u-col span="5" >
							<view class="demo-layout bg-purple-light" style="font-size: 32rpx; ">相关视频</view>
						</u-col>
						<u-col span="3" >
							<view class="demo-layout bg-purple" style="color: rgba(166, 166, 166, 1);">查看更多></view>
						</u-col>
					</u-row>
				</view>
				<view style="margin-left: 30rpx; margin-right: 30rpx;">
					<view>
						<u-popup :show="show1" @close="close" mode="center" :closeable="true">
							<video id="myVideo" :poster="oss_host+video_url+video_cover" :src="oss_host+video_url"
								controls="true" object-fit="contain" autoplay="true"></video>
						</u-popup>
					</view>
					<view style="margin-bottom: 76.7rpx;" v-if="datas.u_video.length==3">
						<u-grid :border="false" col="3">
							<u-grid-item v-for="(listItem,listIndex) in datas.u_video" :key="listIndex" @click="video1(listItem)">
								<image class="v_if_video" :src="oss_host+listItem+video_cover" style=" width: 220rpx; height: 226rpx;"></image>
							</u-grid-item>
						</u-grid>
					</view>
					<view style="margin-bottom: 76.7rpx;" v-if="datas.u_video.length==2">
						<u-grid :border="false" col="2">
							<u-grid-item v-for="(listItem,listIndex) in datas.u_video" :key="listIndex" @click="video1(listItem)">
								<image class="v_if_video" :src="oss_host+listItem+video_cover" style=" width: 330rpx;height: 330rpx;"></image>
							</u-grid-item>
						</u-grid>
					</view>
					<view style="margin-bottom: 76.7rpx;" v-if="datas.u_video.length==1">
						<u-grid :border="false" col="1">
							<u-grid-item v-for="(listItem,listIndex) in datas.u_video" :key="listIndex" @click="video1(listItem)">
								<image class="v_if_video" :src="oss_host+listItem+video_cover" style=" width: 660rpx; height: 424.56rpx;"></image>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
				<u-line :hairline="false" ></u-line>
				<view @click="jump(3)">
					<u-row justify="space-between" customStyle="margin-top: 17.3rpx;margin-left:48.8rpx;margin-bottom: 33rpx;margin-right:48.8rpx; line-height: 52.3px;">
						<u-col span="5" >
							<view class="demo-layout bg-purple-light" style="font-size: 32rpx; ">人物相册</view>
						</u-col>
						<u-col span="3" >
							<view class="demo-layout bg-purple" style="color: rgba(166, 166, 166, 1);">查看更多></view>
						</u-col>
					</u-row>
				</view>
				<view style="margin-left: 35rpx; margin-right: 35rpx; margin-bottom:30px; text-align: center;">
					<u-album :urls="urls2" multipleSize="219rpx" :maxCount="3" v-if="urls2.length==3"></u-album>
					<view style="margin-left: 15.79rpx;"v-else-if="urls2.length==2">
						<u-album :urls="urls2" multipleSize="312.28rpx" :maxCount="2"  ></u-album>
					</view>
					<u-album :urls="urls2" singleSize="652.3rpx" :maxCount="1" v-else-if="urls2.length==1" style="margin-left: 15.79rpx;" ></u-album>
				</view>
				<u-line :hairline="false" ></u-line>
				<view v-if="datas.video_src!=''">
					<u--image class="img" width="349rpx" height="138rpx"
						:src="oss_host+'/uploads/20241128/b7bd4647f335d61f2c9f1e3c146e0694.png'"></u--image>
					<video class="v_if_index_video" :poster="oss_host+datas.video_src+index_video_cover"
						:src="oss_host+datas.video_src" controls="true" object-fit="contain"></video>
				</view>
				<u--image class="img" width="349rpx" height="138rpx"
					:src="oss_host+'/uploads/20241128/610f77c03898d7652f4d40eb1bb60769.png'"></u--image>
				<table class="tab" border="1">
					<tr>
						<td width="140rpx">制作时间</td>
						<td width="512.3rpx">{{datas.makeTime}}</td>
					</tr>
					<tr>
						<td>制作单位</td>
						<td>{{datas.makeDw}}</td>
					</tr>
					<tr>
						<td>资料来源</td>
						<td>{{datas.makeLy}}</td>
					</tr>
				</table>
			</view>
		</view>
		<view class="wrap">
			<u-back-top :scroll-top="scrollTop" top="300"></u-back-top>
		</view>
		<view>
			<u-popup :show="datas.is_accpass==1"  customStyle="width: 606rpx; height: 790rpx;" bgColor="#eafdff" mode="center" round="20">
				<view style="display: flex;
					align-items: center;
					
					justify-content: center;
					height: 100%;
					text-align: center;">
					<u--form>
						<view>访问密码</view>
					<view style="margin-top: 35px;">
						<u--input v-model="accpass" style="background-color: #ffffff;" border="none"
						placeholder="请输入访问密码"></u--input>
					</view>
					<view style="color: red;">{{msg}}</view>
					<view style="margin-top: 35px;">
						<button style="background-color: rgba(60, 154, 252, 1);" @click="conns">确认</button>
					</view>
					</u--form>	
				</view>
				
			</u-popup>
		</view>
	</view>	
	
</template>

<script>
	import {api_host,oss_host,index_video_cover ,video_cover} from "../../utils/appInfo.js"
	import headerVue from './header.vue'
	export default {
		components:{
			headerVue
		},
		data() {
			return {
				show:false,
				show1:false,
				oss_host:oss_host,
				index_video_cover:index_video_cover,
				video_cover:video_cover,
				accpass:"",
				scrollTop: 0,
				api_host:api_host,
				datas:{},
				_id:0,
				show:false,
				show1:false,
				u_guanxi:[],
				msg:"",
				rbc: {
					image: "",
					name: "",
					guanxi: "",
					des: ""
				},
				video_url:"",
				urls2:[]
			}
		},
		onLoad(res) {
			this._id=res.id
			this.api.getIndex({id:this._id}).then(res=>{
				if(res.data.name==""){
					uni.navigateTo({
						url:"../edit/pass_verif?id="+this._id
					})
				}else{
					this.u_guanxi=res.data.u_guanxi
					this.datas=res.data
					for(let i=0;i<=this.datas.u_image.length-1;i++){
						this.urls2.push(this.oss_host+this.datas.u_image[i])
					}
					uni.setNavigationBarTitle({
						title:this.datas.name
					})
				}
			})
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			jump(tab_id){
				// uni.navigateTo({
				// 	url:"./index1?id="+this._id+"&tab_id="+tab_id
				// })
				if(tab_id==0){
					uni.navigateTo({
						url:"./introduction?id="+this._id
					})
				}else{
					uni.navigateTo({
						url:"./index1?id="+this._id+"&tab_id="+tab_id
					}) 
				}
			},
			conns(){
				if(this.accpass==this.datas.accpass){
					this.datas.is_accpass=0
				}else{
					this.accpass=""
					this.msg="密码错误"
					
				}
			},
			character(rbc) {
				this.rbc.image = rbc.image
				this.rbc.name = rbc.name
				this.rbc.guanxi = rbc.guanxi
				this.rbc.des = rbc.des
				this.show = true
			},
			close() {
				this.show = false
				this.show1 = false
			},
			video1(ur) {
				this.show1 = true
				this.video_url = ur
			},
		}
	}
</script>

<style scoped lang="scss">
	.v_if_video {
		// margin-bottom: 17.4rpx;
		// width: 220rpx;
		// height: 226rpx;
		opacity: 1;
		border-radius: 10px;
	}
	.img {
		margin-top: 4rpx;
		margin-left: 191rpx;
		margin-right: 191rpx;
		margin-bottom: 5rpx;
	}
	.v_if_index_video {
		margin-top: 19rpx;
		width: 652.3rpx;
		margin-left: 52.3rpx;
		margin-right: 52.3rpx;
	}
	.tab {
		background-color:rgba(243, 243, 243, 1) ;
		margin-top: 19rpx;
		border-collapse: collapse;
		width: 652.3rpx;
		height: 427rpx;
		margin-left: 52.3rpx;
		margin-right: 52.3rpx;
	}
	.wrap {
		height: 50rpx;
		
	}
	.popu {
		margin-top: 50rpx;
		margin-left: 65rpx;
		margin-right: 65rpx;
	
		.popu_img {
			float: left;
			margin-top: 20rpx;
			margin-left: -15rpx;
			width: 215rpx;
			height: 215rpx;
			border-radius: 40px;
		}
	
		.popu_tex {
			float: left;
			margin-top: 40rpx;
			margin-left: 54rpx;
			line-height: 80rpx;
	
			.text1 {
				color: rgba(153, 153, 153, 1);
			}
		}
	}
	.popu_text {
		margin-top: 37rpx;
		margin-left: 65rpx;
		margin-right: 65rpx;
		font-size: 35rpx;
	}
</style>
